<script setup>
import PreQuestionList from '../components/PreQuestionList.vue'
import PostQuestionList from '../components/PostQuestionList.vue'
import KnowledgeList from '../components/KnowledgeList.vue'
import { ref } from 'vue'

const isFold = ref(false)

const questionList = ref([
  {
    id: '1',
    content:
      '一个长方体的长、宽、高的比是4∶3∶2，它的棱长总和为108厘米，张红认为这个长方体的表面积和体积的数值是一样的，你觉得张红的想法正确吗？请写出你的判断理由。',
    options: [
      { id: 'A', text: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' },
      { id: 'B', text: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb' },
      { id: 'C', text: 'cccccccccccccccccccccccccccccccccccc' },
      { id: 'D', text: 'dddddddddddddddddddddddddddddddddddd' }
    ],
    answer: 'A',
    desc: `【分析】长方体棱长总和包括4条长、4条宽和4条高。因为长、宽、高的比是4:3:2，所以总共的份数为4+3+2=9份。棱长总和为108厘米，那么一份的长度为108-4-9=3厘米。由此可得长为3x4=12厘米，宽为3x3=9厘米，高为3x2=6厘米。然后分别计算长方体的表面积和体积，两者比较大小即可，
【详解】108-4-9=3(厘米)
3x4=12(厘米)
3x3 =9(厘米)
3x2=6(厘米)
表面积:(6x9+6x12+9x12)x2
=(54+72+108)x2
=234x2
=468(平方厘米)
体积:6x9x12
= 54x12
=648(立方厘米)
答:因为表面积和体积的数值不相等，并且表面积是面积单位，体积是体积单位，二者不能比较大小，所以张红的想法不正确。`,
    knowledge: '简易方程',
    selected: true
  },
  {
    id: '2',
    content:
      '双语学校去年有学生2500人，今年学生人数比去年学生人数增加了50人，今年学生人数比去年增加了百分之几?',
    options: [
      { id: 'A', text: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' },
      { id: 'B', text: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb' },
      { id: 'C', text: 'cccccccccccccccccccccccccccccccccccc' },
      { id: 'D', text: 'dddddddddddddddddddddddddddddddddddd' }
    ],
    answer: 'A',
    desc: `求今年学生人数比去年增加了百分之几，求一个数是另一个数的百分之几，用这个数除以另一个数，据此用增加的人数除以去年学
生人数解答。
【详解】50-2500=2%
答:今年学生人数比去年增加了2%。`,
    knowledge: '求一个数是另一个数的百分之几（百分率问题）',
    selected: false
  },
  {
    id: '3',
    content:
      '双语学校去年有学生2500人，今年学生人数比去年学生人数增加了50人，今年学生人数比去年增加了百分之几?',
    options: [
      { id: 'A', text: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' },
      { id: 'B', text: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb' },
      { id: 'C', text: 'cccccccccccccccccccccccccccccccccccc' },
      { id: 'D', text: 'dddddddddddddddddddddddddddddddddddd' }
    ],
    answer: 'A',
    desc: `求今年学生人数比去年增加了百分之几，求一个数是另一个数的百分之几，用这个数除以另一个数，据此用增加的人数除以去年学
生人数解答。
【详解】50-2500=2%
答:今年学生人数比去年增加了2%。`,
    knowledge: '求一个数是另一个数的百分之几（百分率问题）',
    selected: false
  },
  {
    id: '4',
    content:
      '双语学校去年有学生2500人，今年学生人数比去年学生人数增加了50人，今年学生人数比去年增加了百分之几?',
    options: [
      { id: 'A', text: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' },
      { id: 'B', text: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb' },
      { id: 'C', text: 'cccccccccccccccccccccccccccccccccccc' },
      { id: 'D', text: 'dddddddddddddddddddddddddddddddddddd' }
    ],
    answer: 'A',
    desc: `求今年学生人数比去年增加了百分之几，求一个数是另一个数的百分之几，用这个数除以另一个数，据此用增加的人数除以去年学
生人数解答。
【详解】50-2500=2%
答:今年学生人数比去年增加了2%。`,
    knowledge: '求一个数是另一个数的百分之几（百分率问题）',
    selected: false
  },
  {
    id: '5',
    content:
      '双语学校去年有学生2500人，今年学生人数比去年学生人数增加了50人，今年学生人数比去年增加了百分之几?',
    options: [
      { id: 'A', text: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' },
      { id: 'B', text: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb' },
      { id: 'C', text: 'cccccccccccccccccccccccccccccccccccc' },
      { id: 'D', text: 'dddddddddddddddddddddddddddddddddddd' }
    ],
    answer: 'A',
    desc: `求今年学生人数比去年增加了百分之几，求一个数是另一个数的百分之几，用这个数除以另一个数，据此用增加的人数除以去年学
生人数解答。
【详解】50-2500=2%
答:今年学生人数比去年增加了2%。`,
    knowledge: '求一个数是另一个数的百分之几（百分率问题）',
    selected: false
  },
  {
    id: '6',
    content:
      '双语学校去年有学生2500人，今年学生人数比去年学生人数增加了50人，今年学生人数比去年增加了百分之几?',
    options: [
      { id: 'A', text: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' },
      { id: 'B', text: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb' },
      { id: 'C', text: 'cccccccccccccccccccccccccccccccccccc' },
      { id: 'D', text: 'dddddddddddddddddddddddddddddddddddd' }
    ],
    answer: 'A',
    desc: `求今年学生人数比去年增加了百分之几，求一个数是另一个数的百分之几，用这个数除以另一个数，据此用增加的人数除以去年学
生人数解答。
【详解】50-2500=2%
答:今年学生人数比去年增加了2%。`,
    knowledge: '求一个数是另一个数的百分之几（百分率问题）',
    selected: true
  }
])

const selectedList = ref([
  {
    id: '1',
    content:
      '一个长方体的长、宽、高的比是4∶3∶2，它的棱长总和为108厘米，张红认为这个长方体的表面积和体积的数值是一样的，你觉得张红的想法正确吗？请写出你的判断理由。',
    options: [
      { id: 'A', text: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' },
      { id: 'B', text: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb' },
      { id: 'C', text: 'cccccccccccccccccccccccccccccccccccc' },
      { id: 'D', text: 'dddddddddddddddddddddddddddddddddddd' }
    ],
    answer: 'A',
    desc: `【分析】长方体棱长总和包括4条长、4条宽和4条高。因为长、宽、高的比是4:3:2，所以总共的份数为4+3+2=9份。棱长总和为108厘米，那么一份的长度为108-4-9=3厘米。由此可得长为3x4=12厘米，宽为3x3=9厘米，高为3x2=6厘米。然后分别计算长方体的表面积和体积，两者比较大小即可，
【详解】108-4-9=3(厘米)
3x4=12(厘米)
3x3 =9(厘米)
3x2=6(厘米)
表面积:(6x9+6x12+9x12)x2
=(54+72+108)x2
=234x2
=468(平方厘米)
体积:6x9x12
= 54x12
=648(立方厘米)
答:因为表面积和体积的数值不相等，并且表面积是面积单位，体积是体积单位，二者不能比较大小，所以张红的想法不正确。`,
    knowledge: '简易方程',
    selected: true
  },
  {
    id: '6',
    content:
      '双语学校去年有学生2500人，今年学生人数比去年学生人数增加了50人，今年学生人数比去年增加了百分之几?',
    options: [
      { id: 'A', text: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' },
      { id: 'B', text: 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb' },
      { id: 'C', text: 'cccccccccccccccccccccccccccccccccccc' },
      { id: 'D', text: 'dddddddddddddddddddddddddddddddddddd' }
    ],
    answer: 'A',
    desc: `求今年学生人数比去年增加了百分之几，求一个数是另一个数的百分之几，用这个数除以另一个数，据此用增加的人数除以去年学
生人数解答。
【详解】50-2500=2%
答:今年学生人数比去年增加了2%。`,
    knowledge: '求一个数是另一个数的百分之几（百分率问题）',
    selected: true
  }
])

function addQuestion(id) {
  console.log(id)

  var idx = questionList.value.findIndex((item) => item.id === id)
  questionList.value[idx].selected = true
  selectedList.value.push(questionList.value[idx])
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="title">选题组卷</div>
      </el-header>
      <el-container class="content-layout">
        <el-aside class="aside" width="250px"><KnowledgeList /></el-aside>
        <el-main class="pre">
          <PreQuestionList :questionList="questionList" @add="addQuestion" />
        </el-main>
        <el-main :class="isFold ? 'basket-fold' : 'basket'">
          <div class="fold" @click="isFold = true">
            <span>收</span>
            <span>起</span>
          </div>
          <div class="gap"></div>
          <PostQuestionList :questionList="selectedList" />
        </el-main>
      </el-container>
    </el-container>
    <div class="fold2" v-if="isFold" @click="isFold = false">
      <el-badge class="item" :value="1" :offset="[-10, 5]">
        <div class="inner">
          <el-icon size="20"><ShoppingCartFull /></el-icon>
          <div>试题篮</div>
        </div>
      </el-badge>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.common-layout {
  background-color: #fff;
  box-sizing: border-box;

  .el-header {
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    padding: 0;
    .title {
      height: 60px;
      line-height: 60px;
      font-size: 28px;
      font-weight: 700;
      padding-left: 2rem;
    }
  }

  .content-layout {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    background-color: #e9ecef;
    // gap: 5px;
    padding-top: 5px;

    .aside,
    .pre,
    .basket {
      height: calc(100vh - 65px);
      box-sizing: border-box;
      overflow: hidden;
    }

    .aside {
      background-color: #fff;
      padding: 0 1rem 0 2rem;
      margin-right: 5px;
    }

    .pre,
    .basket {
      width: 50%;
      box-sizing: border-box;
      background-color: #fff;
    }

    .basket {
      width: 50%;
      position: relative;
      display: flex;
      padding: 0;

      .fold {
        position: relative;
        flex-shrink: 0;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
        border-radius: 10px 0 0 10px;
        width: 40px;
        height: 80px;
        background-color: #43b883;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
      }

      .fold:hover {
        cursor: pointer;
        background-color: #73cba3;
      }

      .gap {
        background-color: #e9ecef;
        flex-shrink: 0;
        width: 5px;
        height: 100%;
      }
    }

    .basket-fold {
      overflow: hidden;
      display: none;
      //max-width: 0;
      //transition: all 0.5s;

      .fold {
        display: none;
      }
    }
  }
}

.fold2 {
  position: fixed;
  top: 50%;
  right: 0;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  background-color: #fff;

  .inner {
    height: 100px;
    width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
}

.fold2:hover {
  cursor: pointer;
}
</style>
